<template>
  <section class="confirm-container flex flex-js-c flex-ai-c" @mousewheel.prevent>
    {{ props.text }}
    <div
      :class="['body position-relative', props.show ? 'animation' : '']"
      @click.stop="() => {}">
      <div class="footer flex flex-js-c flex-ai-c">
        <button
          @click="props.onConfirm(true)"
          class="button bg-color-main margin-right-sm">
          确认
        </button>
        <button
          @click="props.onCancel(false)"
          class="button bg-color-gray-f3">
          关闭
        </button>
      </div>
    </div>
  </section>
</template>

<script lang="ts" setup>
  import { ConfirmType } from "@/common/type";
  import { HintCode } from "@/common/utils/enum";

  const props = withDefaults(defineProps<ConfirmType>(),{
    text: '',
    type: HintCode.SUCCESS,
    onConfirm: () => {},
    onCancel: () => {}
  });
</script>

<style lang="scss" scoped>
  @keyframes scale {
    from {
      transform: scale(0);
    }
    to {
      transform: scale(1);
    }
  }
  .confirm-container {
    top: 0;
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: rgb(0, 0, 0, 0.4);
    z-index: 9999;
    .body {
      border-radius: 4Px;
      overflow: hidden;
      &.animation {
        animation: scale .5s;
      }
    }
    .footer {
      height: 55Px;
      background-color: #FFFFFF;
      .button {
        height: 28Px;
        width: 100Px;
        border: none;
        cursor: pointer;
        border-radius: 5Px;
        &:first-child {
          color: #FFFFFF;
          border: 1Px solid $color-main;
        }
        &:last-child {
          background-color: white;
          border: 1Px solid $color-gray-e5;
        }
      }
    }
  }
</style>
